<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据可视化</title>
    <style>
        .box1 {
            width: 600px;
            height: 400px;
            background-color: rgb(219, 68, 68);
        }
    </style>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> -->


    <script src="./js/flexible.js"></script>
    <script src="./js/jquery-1.12.2.min.js"></script>
</head>

<body>
    <div class="box">
        <div class="cloum">
            <div class="border_img">

            </div>


        </div>
        <div class="cloum">2</div>
        <div class="cloum">3</div>
    </div>


    <div class="box1">


    </div>
    <script>
        var myChart = echarts.init(document.querySelector('.box1'))

        var sin = Math.sin;
        var cos = Math.cos;
        var pow = Math.pow;
        var sqrt = Math.sqrt;
        var cosh = Math.cosh;
        var sinh = Math.sinh;
        var PI = Math.PI;

        var aa = 0.4;
        var r = 1 - aa * aa;
        var w = sqrt(r);
        option = {
            toolbox: {
                left: 20,
                iconStyle: {
                    normal: {
                        borderColor: '#000'
                    }
                },
                feature: {
                    myExportObj: {
                        title: 'Export OBJ',
                        icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
                        onclick: function () {
                            var res = echarts.exportGL2PLY(myChart, {
                                mainType: 'grid3D',
                                index: 0
                            });
                            download(res, 'surface.ply', 'text/plain');
                        }
                    }
                }
            },
            tooltip: {},
            visualMap: {
                show: false,
                dimension: 2,
                min: -3,
                max: 3,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                }
            },
            xAxis3D: {},
            yAxis3D: {},
            zAxis3D: {},
            grid3D: {
                show: true,
                postEffect: {
                    enable: true,
                    SSAO: {
                        enable: true,
                        radius: 4
                    }
                },
                viewControl: {
                    distance: 130,
                    beta: 50
                },
                light: {
                    main: {
                        intensity: 1,
                        shadow: true
                    },
                    ambient: {
                        intensity: 0
                    },
                    ambientCubemap: {
                        texture: 'https://echarts.apache.org/examples/data-gl/asset/canyon.hdr',
                        exposure: 2,
                        diffuseIntensity: 0.8,
                        specularIntensity: 1
                    }
                }
            },
            series: [{
                type: 'surface',
                parametric: true,
                wireframe: {
                    show: false
                },
                shading: 'realistic',
                realisticMaterial: {
                    roughness: 0.3,
                    metalness: 0
                },
                parametricEquation: {
                    u: {
                        min: -13.2,
                        max: 13.2,
                        step: 0.2
                    },
                    v: {
                        min: -37.4,
                        max: 37.4,
                        step: 0.2
                    },
                    x: function (u, v) {
                        var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
                        return -u + (2 * r * cosh(aa * u) * sinh(aa * u) / denom);
                    },
                    y: function (u, v) {
                        var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
                        return 2 * w * cosh(aa * u) * (-(w * cos(v) * cos(w * v)) - (sin(v) * sin(w * v))) / denom;
                    },
                    z: function (u, v) {
                        var denom = aa * (pow(w * cosh(aa * u), 2) + aa * pow(sin(w * v), 2))
                        return 2 * w * cosh(aa * u) * (-(w * sin(v) * cos(w * v)) + (cos(v) * sin(w * v))) / denom
                    }
                }
            }]
        };



        myChart.setOption(option)
    </script>
</body>

</html>